<template>
  <div class="m-token">
    <main-coin></main-coin>
    <div class="title flex-left">
      <h3>{{$t('token.tokenList')}}</h3>
      <span class="token-count">{{$t('token.total',[pages.total])}}</span>
    </div>
    <!-- suffix-icon="el-icon-search" -->
    <el-autocomplete
      size="small"
      class="search-input"
      v-model="coinSearch"
      :fetch-suggestions="querySearch"
      :placeholder="$t('token.keyword')"
      :trigger-on-focus="false"
      @select="searchToken(coinSearch)"
      @keyup.enter.native="searchToken(coinSearch)"
    >
      <el-button slot="append" icon="el-icon-search"></el-button>
      <template slot-scope="{item}">
        <div class="search-symbol-item flex-left">
          <img :src="item.icon" />
          <span>{{item.value}}</span>
        </div>
      </template>
    </el-autocomplete>
    <!-- 表格部分 -->
    <el-table
      :data="Tokens"
      stripe
      style="width: 100%"
      class="data-table table-shadow"
      header-cell-class-name="table-font"
    >
      <template slot="empty">
        <div>
          <div
            v-if="!LoadingSucc"
            class="loading-line"
            v-loading="!LoadingSucc"
            element-loading-text="Loading..."
            element-loading-spinner="el-icon-loading"
          ></div>
          <span v-else>{{$t('page.nodata')}}</span>
        </div>
      </template>
      <el-table-column prop="index" :label="$t('token.id')" width="80"></el-table-column>
      <el-table-column prop="blockTime" :label="$t('token.title')" width="130">
        <template slot-scope="item">
          <router-link
            class="flex-left token-box"
            :to="`/tokenDetail?TokenName=${item.row.symbol}`"
          >
            <img :src="item.row.icon" class="token-icon" />
            <span class="light">{{item.row.symbol}}</span>
          </router-link>
        </template>
      </el-table-column>
      <el-table-column :label="$t('token.introduce')" min-width="400">
        <template slot-scope="item">
          <pre class="introduce">{{item.row.name}}<br />{{introFilter(item.row)}}</pre>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="holders" label="持有人" width="80"></el-table-column> -->
      <el-table-column :label="$t('token.time')" width="120">
        <template slot-scope="item">
          <span>{{item.row.createdTime|formatTime('yyyy-MM-dd')}}</span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 底部分页 -->
    <div class="bottom-page flex-right">
      <page-container
        @pageChange="pageChange"
        @sizeChange="sizeChange"
        :currentPage="pages.currentPage"
        :pageSize="pages.pageSize"
        :total="pages.total"
      ></page-container>
    </div>
  </div>
</template>

<script>
import MainCoin from "./MainCoin";
import PageContainer from "@/components/mobile/PageContainer.vue";
import TokenBase from "@/mixins/Token/tokenList.js";
export default {
  mixins: [TokenBase],
  components: {
    MainCoin,
    PageContainer
  }
};
</script>

<style lang="scss">
.m-token {
  padding: 0 20px 20px;
  min-height: calc(100vh - 113px);
  .title {
    margin-bottom: 10px;
    h3 {
      color: $black;
      font-size: 14px;
      font-family: PingFangSC-Semibold;
    }
    span {
      margin-left: 20px;
      color: $font_grey;
      font-size: 12px;
    }
  }
  .search-input {
    width: 100%;
    .el-input__inner {
      border-top-left-radius: 25px;
      border-bottom-left-radius: 25px;
    }
    .el-input-group__append {
      color: $white;
      background: $blue;
      border-top-right-radius: 25px;
      border-bottom-right-radius: 25px;
    }
  }
  .data-table {
    margin-top: 15px;
    border-radius: 2px;
    border: 1px solid rgba(235, 239, 241, 1);
    font-size: 12px;
    color: $black;
    .table-font {
      color: $black;
      font-weight: 600;
    }
    .introduce {
      white-space: pre-wrap;
      // text-indent: 2em;
      padding-right: 3em;
      text-align: left;
      pre {
        line-height: 1.5em;
        // white-space: pre-wrap;
        font-size: 12px;
        font-family: sans-serif;
      }
    }
    .token-icon {
      margin-right: 13px;
      height: 26px;
    }
    .token-box {
      min-width: 120px;
      margin: 0 auto;
      cursor: pointer;
    }
    .loading-line {
      height: 60px;
      line-height: 18px;
    }
  }
  .bottom-page {
    margin-top: 23px;
  }
  .el-table td:nth-of-type(1) .cell {
    padding-left: 20px;
  }
}
.search-symbol-item {
  padding: 5px 0;
  color: $black;
  transition: 0.3s;
  img {
    margin-right: 14px;
    height: 26px;
  }
}
.search-symbol-item:hover {
  color: $group_title;
}
</style>